<template>
	<view class="enhanced-banner">
		<swiper
			class="banner-swiper"
			:autoplay="autoplay"
			:interval="interval"
			:duration="duration"
			:circular="circular"
			:indicator-dots="showDots"
			:indicator-color="indicatorColor"
			:indicator-active-color="indicatorActiveColor"
			@change="onSwiperChange"
		>
			<swiper-item v-for="(banner, index) in banners" :key="banner.id || index">
				<view class="banner-item" @tap="handleBannerClick(banner)">
					<cl-image
						:src="banner.pic"
						:alt="banner.description"
						class="banner-image"
						mode="aspectFill"
						:lazy-load="true"
						fallback="/static/empty/no.jpg"
						@error="handleImageError"
					/>
					<view class="banner-overlay"></view>
					<view class="banner-content" v-if="banner.description">
						<text class="banner-title">{{ banner.description }}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<!-- 自定义指示器 -->
		<view class="custom-indicators" v-if="showCustomDots && banners.length > 1">
			<view
				class="indicator-dot"
				v-for="(banner, index) in banners"
				:key="index"
				:class="{ active: currentIndex === index }"
				@tap="switchTo(index)"
			></view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from "vue";

interface Banner {
	id: number;
	createTime: string;
	updateTime: string;
	tenantId: number | null;
	description: string;
	path: string | null;
	pic: string;
	sortNum: number;
	status: number;
	type: number;
}

interface Props {
	banners: Banner[];
	autoplay?: boolean;
	interval?: number;
	duration?: number;
	circular?: boolean;
	showDots?: boolean;
	showCustomDots?: boolean;
	indicatorColor?: string;
	indicatorActiveColor?: string;
}

const props = withDefaults(defineProps<Props>(), {
	autoplay: true,
	interval: 4000,
	duration: 500,
	circular: true,
	showDots: false,
	showCustomDots: true,
	indicatorColor: "rgba(255, 255, 255, 0.5)",
	indicatorActiveColor: "#ffffff",
});

const emit = defineEmits<{
	click: [banner: Banner];
	change: [index: number];
}>();

const currentIndex = ref(0);

function onSwiperChange(e: any) {
	currentIndex.value = e.detail.current;
	emit("change", e.detail.current);
}

function handleBannerClick(banner: Banner) {
	emit("click", banner);
}

function switchTo(index: number) {
	currentIndex.value = index;
	// TODO: 手动切换swiper到指定index
}

function handleImageError(e: any) {
	console.error("Banner图片加载失败:", e);
}
</script>

<style lang="scss" scoped>
.enhanced-banner {
	position: relative;
	border-radius: 16rpx;
	overflow: hidden;
	margin: 0 16rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.banner-swiper {
	height: 380rpx;
	border-radius: 16rpx;
}

.banner-item {
	position: relative;
	width: 100%;
	height: 100%;
}

.banner-image {
	width: 100%;
	height: 100%;
	border-radius: 16rpx;
}

.banner-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		transparent 60%,
		rgba(0, 0, 0, 0.1) 80%,
		rgba(0, 0, 0, 0.3) 100%
	);
	border-radius: 16rpx;
}

.banner-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 24rpx;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
	border-bottom-left-radius: 16rpx;
	border-bottom-right-radius: 16rpx;
}

.banner-title {
	color: #ffffff;
	font-size: 28rpx;
	font-weight: 500;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
}

.custom-indicators {
	position: absolute;
	bottom: 20rpx;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.indicator-dot {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
	transition: all 0.3s ease;

	&.active {
		background-color: #ffffff;
		transform: scale(1.2);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
	}
}
</style>
